<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当图书榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .w1 {
            width: 960px;
            margin: 10px auto;
        }
        .w2 {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            position: relative;
        }
        .w2 a {
            color: #000;
            text-decoration: none;
        }
        .w2 ul {
            display: flex;
            background-color: #EAFFFA;
            width: 200px;
            height: 25px;
            justify-content: space-around;
            align-items: center;
            border: 1px solid paleturquoise;
        }
        .w2 img.L1 {
            position: absolute;
            left: 780px;
            top: 15px;
        }
        .two {
            background-color: #FE6915;
            margin: 5px 0;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-around;
        }
        .two a {
            color: #fff;
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        body {
            font-size: 12px;
            font-family: "宋体", "Verdana";
        }
        li {
            list-style: none;
        }
        .four {
            margin: 5px 0;
            border: 1px solid yellowgreen;
            display: flex;
            padding: 80px 20px 20px 20px;
            position: relative;
        }
        .image1 {
            position: absolute;
            left: -13px;
            top: 15px
        }
        .d1 .image2 {
            position: absolute;
            left: 20px;
            top: -5px;
        }
        .d2 {
            width: 350px;
        }
        h3 {
            color: blue;
            padding: 10px 0px;
            font-weight: 400;
        }
        p {
            margin: 10px 0px;
            font-weight: 700;
        }
        .d2 .hang1 {
            line-height: 20px;
        }
        span {
            color: #8E1846;
        }
        .top,
        .botter {
            display: flex;
            margin-bottom: 10px;
        }
        .image3,
        .image5,
        .d1 {
            position: relative;
        }
        .image4,
        .image6 {
            position: absolute;
            left: 0px;
            top: -5px;
        }
        span.g {
            color: green;
        }
        .five {
            text-align: center;
            font-weight: 400;
            color: #999;
        }
        .five img {
            vertical-align: middle;
            width: 30px;
        }
    </style>
</head>

<body>
<div class="w1 ">
    <div class="w2">
        <img src="../tu/logo.jpg">
        <ul>
            <li><a href="#">尾品汇</a></li>
            <li><a href="#">当当优品</a></li>
            <li><a href="#">数字馆</a></li>
            <li><a href="#">都看阅器</a></li>
        </ul>
        <img src="../tu/icon_count.png" class="L1">
    </div>
    <div class="two">
        <a href="#">首页</a> <a href="#">图书</a> <a href="#">音像</a>
        <a href="#">童装</a> <a href="#">服装</a> <a href="#">鞋靴</a>
        <a href="#">运动</a> <a href="#">箱包</a> <a href="#">美妆</a>
        <a href="#">珠宝</a> <a href="#">家居</a> <a href="#">食品</a>
        <a href="#">酒 </a> <a href="#">手机</a> <a href="#">数码</a>
        <a href="#">电脑</a> <a href="#">家电</a>
    </div>
    <div class="three">
        <img src="../tu/banner.png">
    </div>
    <div class="four">
        <div class="image1"><img src="../tu/bg_bang.gif"></div>
        <div class="d1">
            <img src="../tu/book-01.jpg">
            <img src="../tu/bookNo1.gif" class="image2">
        </div>
        <div class="d2">
            <h3>偷影子的人 </h3>
            <p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
            <p>出版社：湖南文艺出版社</p>
            <p>当当价:<span>￥ 17.90</span></p>
            <p class="hang1">不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，
                今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：
                他能“偷别人的影子”，因而能看见他</p>
        </div>
        <div class="d3">
            <div class="top">
                <div class="image3"><img src="../tu/book-02.jpg">
                    <img src="../tu/bookNo2.gif" class="image4">
                </div>
                <div>
                    <h3>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </h3>
                    <p>作 者：柴静 著</p>
                    <p>出版社：广西师范大学出版社</p>
                    <p><span>￥ 29.40</span> <span class="g">7.4折</span></p>
                </div>
            </div>
            <div class="botter">
                <div class="image5"><img src="../tu/book-03.jpg">
                    <img src="../tu/bookNo3.gif" class="image6">
                </div>
                <div>
                    <h3>改变孩子先改变自己</h3>
                    <p>作 者：贾容韬 贾毅 著</p>
                    <p>出版社：作家出版社</p>
                    <p><span>￥ 22.20</span> <span class="g">7.4折</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="five">
        <p>Copyright (C) 当当网 2004-2017, All Rights Reserved
            <img src="../tu/validate.gif">
            京ICP证041189号出版物经营许可证 新出发京批字第直0673号
        </p>

    </div>
</div>
</body>

</html>